<template>
    <div>
        <h3>elementUi中表单组件的使用</h3>
        <el-input v-model="input" placeholder="请输入内容"></el-input>

        <div>
            <el-radio v-model="radio" label="1">备选项</el-radio>
            <el-radio v-model="radio" label="2">备选项</el-radio>
            <el-checkbox v-model="checked">备选项</el-checkbox>
        </div>

        <div>
            <el-switch
                v-model="value"
                active-color="green"
                inactive-color="red">
            </el-switch>
            <br>

            <el-switch
                v-model="value"
                active-text="正常"
                inactive-text="禁用">
            </el-switch>
            <br>
            <el-switch
                @change="changeState"
                v-model="value2"
                active-color="#13ce66"
                inactive-color="#ff4949"
                v-bind:active-value="1"
                :inactive-value="0">
            </el-switch>
        </div>

        <hr>
<!--
      Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可
       ref     id
-->
        <h3>form表单的校验</h3>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="活动名称" prop="name">
                <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item label="活动区域" prop="region">
                <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
            </el-form-item>
        </el-form>
    </div>

</template>

<script>
export default {
    name: "ElementInput",
    data() {
        return {
            value2:1,   //  active-value  inactive-value  接受Boolean, String或Number类型的值
            value:true,   //  switch开关    Boolean
            radio:'2',   //  radio的值和那个单选的label一致 则默认选中哪个   String  Number  Boolean
            input: '',
            checked: false ,  //复选框    默认绑定变量的值会是Boolean，选中为true
            rules: {
                name: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                region: [
                    { required: true, message: '请选择活动区域', trigger: 'change' }
                ]
            },
            ruleForm:{
                name:'',
                region:''
            }
        }
    },
    methods:{
        changeState(state){
            console.log("开关按钮被点击了state="+state)
        },
        submitForm(formName){  //  ruleForm

            this.$refs[formName].validate((valid) => {
                if (valid) {
                    // 发送异步请求
                    console.log(JSON.stringify(this.ruleForm))
                } else {
                    console.log('请填写完整的信息');
                    return false;
                }
            });

        }
    }
}
</script>

<style scoped>

</style>